<template>
  <div class="box">
    <div class="navigation">
      <router-link to="/home/timing-center">
        <svg class="icon" viewBox="0 0 1024 1024">
          <path
            d="M362.666667 895.914667V639.850667c0-36.266667 33.109333-63.850667 72.533333-63.850667h153.6c39.253333 0 72.533333 27.648 72.533333 63.850667v256.064h59.904c61.269333 0 110.762667-47.957333 110.762667-106.730667V414.165333L557.162667 139.328a63.808 63.808 0 0 0-90.325334 0L192 414.165333v375.018667c0 58.88 49.386667 106.730667 110.762667 106.730667H362.666667z m42.666666 0h213.333334V639.850667c0-10.709333-12.586667-21.184-29.866667-21.184h-153.6c-17.408 0-29.866667 10.389333-29.866667 21.184v256.064z m469.333334-439.082667v332.352c0 82.645333-68.885333 149.397333-153.429334 149.397333H302.762667C218.133333 938.581333 149.333333 871.936 149.333333 789.184V456.832l-27.584 27.584a21.333333 21.333333 0 1 1-30.165333-30.165333L436.672 109.162667a106.474667 106.474667 0 0 1 150.656 0l345.088 345.088a21.333333 21.333333 0 0 1-30.165333 30.165333L874.666667 456.832z"
            :fill="timingFill"
          />
        </svg>
        <div>主页</div>
      </router-link>
      <router-link to="/home/space-target">
        <svg class="icon" viewBox="0 0 1024 1024">
          <path
              d="M512.187846 1024h-0.414195a46.712005 46.712005 0 0 1-23.01084-6.063356L85.704941 785.216515A46.873081 46.873081 0 0 1 62.348938 744.521845V279.438255a46.804048 46.804048 0 0 1 23.332992-40.568111L488.601736 6.230553a46.99964 46.99964 0 0 1 46.769532 0L938.256557 238.847133a46.85007 46.85007 0 0 1 23.379014 40.69467v465.095096a46.781037 46.781037 0 0 1-23.390519 40.579616L535.371268 1017.833095a47.103189 47.103189 0 0 1-23.183422 6.166905z m1.23108-49.852985l0.563766 0.172582z m-3.175496-924.402964L110.832778 282.360631l1.737318 462.276268L511.980749 973.318625l401.147971-231.604103-1.714307-462.276267z"
              :fill="spaceFill"
          />
          <path
              d="M512.107309 743.935068h-0.506239a47.379319 47.379319 0 0 1-21.77976-5.695183L327.778976 644.781359a45.595979 45.595979 0 0 1-22.769226-39.705204V418.837923a45.549957 45.549957 0 0 1 22.75772-39.521118l161.421042-93.377988a45.699528 45.699528 0 0 1 45.561463 0l161.444052 93.193901a45.653506 45.653506 0 0 1 22.780732 39.578645v186.284254a45.74555 45.74555 0 0 1-22.780732 39.532623l-161.386525 93.57358a48.78298 48.78298 0 0 1-22.700193 5.833248zM355.230908 602.590984L512.210857 693.184661l156.473711-90.789269V421.277072l-156.680808-90.490128-156.772852 90.674214z m0 2.577214z m0-186.456835z"
              :fill="spaceFill"
          />
          <path
              d="M341.044725 632.344a21.710727 21.710727 0 0 1-12.759511-39.118428l170.936024-126.191445a21.655501 21.655501 0 0 1 25.74913 34.826906L353.597138 628.017962a21.6532 21.6532 0 0 1-12.552413 4.326038zM511.992254 996.076346a27.981181 27.981181 0 0 1-17.764368-6.132389 19.122008 19.122008 0 0 1-7.351963-14.66941V718.289487c0-11.50542 11.240795-20.709756 25.116331-20.709756s25.104826 9.296379 25.104827 20.709756v257.031081a19.122008 19.122008 0 0 1-7.351964 14.623389 27.946665 27.946665 0 0 1-17.752863 6.086367z"
              :fill="spaceFill"
          />
          <path
              d="M682.928278 632.344a21.618684 21.618684 0 0 1-12.978113-4.326038L499.221238 501.861033a21.607179 21.607179 0 0 1-8.870679-17.522755V314.690861a21.641695 21.641695 0 0 1 43.271885 0v158.774795l162.07685 119.656368a21.733738 21.733738 0 0 1-12.771016 39.118427zM74.740275 286.928283l26.111551-42.914066 254.075339 154.601779-26.111551 42.912916zM927.122762 244.029174l26.112701 42.912916-254.743803 155.00792-26.111551-42.912915z"
              :fill="spaceFill"
          />
        </svg>
        <div>卫星</div>
      </router-link>
      <router-link to="/home/ground-station">
        <svg class="icon" viewBox="0 0 1024 1024">
          <path
              d="M815.999828 464.000317c0 58.599967-16.599991 113.199936-45.199975 159.59991-16.199991 26.199985-52.79997 30.299983-74.599957 8.499995-15.799991-15.799991-18.49999-40.299977-6.799996-59.299966C709.299888 540.400274 719.999882 503.000295 719.999882 464.000317c0-55.599969-21.599988-107.799939-60.899965-147.099916S567.599969 256.000435 512 256.000435s-107.799939 21.599988-147.099917 60.899966S304.000118 408.400349 304.000118 464.000317c0 38.999978 10.699994 76.399957 30.599982 108.799939 11.699993 18.999989 8.999995 43.599975-6.799996 59.299966-21.799988 21.799988-58.399967 17.69999-74.599957-8.499995-28.599984-46.399974-45.199974-100.999943-45.199975-159.59991 0-167.899905 136.099923-303.999828 303.999828-303.999828s303.999828 136.099923 303.999828 303.999828z"
              :fill="stationFill"
          />
          <path
              d="M975.999737 465.300316c-0.3 103.799941-34.69998 199.599887-92.499947 276.699844-17.49999 23.399987-51.699971 25.799985-72.299959 5.099997-16.89999-16.89999-18.699989-43.699975-4.299998-62.899965 17.79999-23.799987 32.599982-49.499972 44.299975-77.099956C870.299797 561.900262 879.999792 513.700289 879.999792 464.000317c0-49.699972-9.699995-97.899945-28.899984-143.199919-18.49999-43.799975-45.099974-83.199953-78.899955-116.999933-33.799981-33.799981-73.199959-60.399966-116.999934-78.899956C609.899945 105.70052 561.699972 96.000526 512 96.000526s-97.899945 9.699995-143.199919 28.899983c-43.799975 18.49999-83.199953 45.099974-116.999934 78.899956-33.799981 33.799981-60.399966 73.199959-78.899955 116.999933C153.700203 366.100373 144.000208 414.300345 144.000208 464.000317c0 49.699972 9.699995 97.899945 28.899984 143.199919 11.699993 27.499984 26.499985 53.29997 44.299975 77.099956 14.399992 19.199989 12.599993 45.899974-4.299998 62.899965-20.699988 20.699988-54.899969 18.09999-72.399959-5.299997C82.400243 664.400204 48.000263 568.200258 48.000263 464.000317 48.000263 207.500462 256.100145-0.39942 512.7 0.00058c256.999854 0.4 463.999737 208.299882 463.299737 465.299736z"
              :fill="stationFill"
          />
          <path
              d="M591.999955 960.000036h43.999975c2.199999 0 3.999998 1.799999 3.999998 3.999998v55.999968c0 2.199999-1.799999 3.999998-3.999998 3.999998H388.00007c-2.199999 0-3.999998-1.799999-3.999998-3.999998v-55.999968c0-2.199999 1.799999-3.999998 3.999998-3.999998h43.999975c17.69999 0 31.999982-14.299992 31.999982-31.999982V619.900229c0-20.499988-9.799994-39.899977-26.499985-51.899971-32.599982-23.399987-53.79997-61.799965-53.49997-105.09994 0.5-70.69996 58.999967-127.899928 129.699927-126.999928 69.89996 0.899999 126.299928 57.899967 126.299929 127.999927 0 42.899976-21.099988 80.899954-53.49997 104.099941-16.699991 11.999993-26.499985 31.299982-26.499985 51.799971V928.000054c0 17.69999 14.299992 31.999982 31.999982 31.999982z"
              :fill="stationFill"
          />
        </svg>
        <div>地面站</div>
      </router-link>
      <router-link to="/home/working-status">
        <svg class="icon" viewBox="0 0 1024 1024">
          <path
              d="M495.65696 499.15904H250.80832C115.79392 499.15904 5.95968 389.3248 5.95968 254.3104S115.79392 9.46176 250.80832 9.46176s244.8384 109.83424 244.8384 244.84864c0 1.1776-0.03072 2.34496-0.07168 3.51232l-0.04096 1.52576 0.12288 239.81056zM250.80832 50.42176c-112.42496 0-203.88864 91.46368-203.88864 203.88864s91.46368 203.88864 203.88864 203.88864h203.8784l-0.1024-199.22944 0.11264-4.6592c-0.01024-112.42496-91.46368-203.88864-203.88864-203.88864zM776.00768 499.15904H531.15904l0.12288-240.20992-0.04096-1.11616a99.95264 99.95264 0 0 1-0.07168-3.51232c0-135.0144 109.83424-244.84864 244.8384-244.84864s244.84864 109.824 244.84864 244.8384-109.83424 244.84864-244.84864 244.84864z m-203.86816-40.96h203.86816c112.42496 0 203.88864-91.46368 203.88864-203.88864S888.44288 50.42176 776.00768 50.42176c-112.42496 0-203.8784 91.46368-203.8784 203.88864l0.11264 4.2496-0.1024 199.63904zM247.98208 1024C112.97792 1024 3.14368 914.15552 3.14368 779.15136s109.83424-244.8384 244.84864-244.8384H492.8512l-0.13312 240.20992 0.04096 1.00352c0.04096 1.19808 0.08192 2.4064 0.08192 3.62496C492.83072 914.15552 382.99648 1024 247.98208 1024z m0-448.72704c-112.42496 0-203.88864 91.46368-203.88864 203.8784C44.10368 891.57632 135.55712 983.04 247.98208 983.04s203.88864-91.46368 203.88864-203.88864l-0.11264-4.17792 0.1024-199.70048h-203.8784zM773.20192 1024c-135.0144 0-244.84864-109.84448-244.84864-244.84864 0-1.28 0.04096-2.53952 0.08192-3.79904l0.0512-1.37216-0.14336-239.6672h244.85888c135.0144 0 244.8384 109.83424 244.8384 244.8384S908.20608 1024 773.20192 1024z m-203.8784-448.72704l0.11264 199.22944-0.12288 4.64896C569.31328 891.57632 660.76672 983.04 773.20192 983.04c112.42496 0 203.8784-91.46368 203.8784-203.88864 0-112.42496-91.46368-203.8784-203.8784-203.8784h-203.8784z"
              :fill="statusFill"
          />
        </svg>
        <div>工作状态</div>
      </router-link>
    </div>
    <a class="bottom" href="#" >
      <svg class="back" viewBox="0 0 1024 1024">
        <path
            d="M442.5 512l273.1 273.1c25 25 25 65.5 0 90.5s-65.5 25-90.5 0L308.4 558.9c-12.9-12.9-19.2-30-18.7-47-0.4-16.9 5.8-33.9 18.7-46.8l316.8-316.8c25-25 65.5-25 90.5 0s25 65.5 0 90.5L442.5 512z"
            fill="#00f0ff"
        />
      </svg>
    </a>
  </div>
</template>

<script setup lang="ts">
import useCurrentInstance from '@/hooks/useCurrentInstance'

const linkFill = '#00d4f3'
const activeFill = '#fff'

let timingFill = $ref(linkFill)
let spaceFill = $ref(linkFill)
let stationFill = $ref(linkFill)
let statusFill = $ref(linkFill)

const resetFill = () => {
  timingFill = linkFill
  spaceFill = linkFill
  stationFill = linkFill
  statusFill = linkFill
}

const toggleFill = (path: string) => {
  if (path.includes('/timing-center')) {
    resetFill()
    timingFill = activeFill
    return
  }
  if (path.includes('/space-target')) {
    resetFill()
    spaceFill = activeFill
    return
  }
  if (path.includes('/ground-station')) {
    resetFill()
    stationFill = activeFill
    return
  }
  if (path.includes('/working-status')) {
    resetFill()
    statusFill = activeFill
    return
  }
}

// 监听路由变化，修改图标颜色
const { ctx } = useCurrentInstance()
watchEffect(() => toggleFill(ctx.$router.currentRoute.value.path))
</script>

<style lang="less">
a {
  display: block;
  color: #fff;
  text-decoration: none;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  .navigation {
    margin-top: 80px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    a {
      height: 240px;
      div {
        font-size: 32px;
        text-align: center;
      }
      .icon {
        width: 100%;
        height: 80px;
        margin-bottom: 15px;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 100px;
    margin-bottom: 70px;
    .back {
      width: 100%;
      height: 80px;
    }
  }
}
</style>
